<template>
    <div class="shop-list">
        <div class="shop-list-header">
            <div class="shop-list-title">
                店铺业务信息
            </div>
            <ElButton type="primary" v-if="auth.has('add')" plain @click="onAddShopBusiness">添加店铺所属业务</ElButton>
        </div>

        <div>
            <ShopBusinessShopItem v-for="(item, index) in modelValue" @edit="onEdit(item, index)"
                @copy="onCopy(item, index)" :key="item" :data="item" />
            <ElEmpty v-if="!modelValue.length" />
        </div>
    </div>
</template>

<script setup lang="ts">
import ShopBusinessShopItem from './ShopBusinessShopItem.vue'
import { addDialog } from '../dialog/shopBusineessDialogEdit'
import { copyYwlxDialog } from '../dialog/copyYwlxSelect'
import { copyToClipboard } from '@/utils/common'
import { useAuth } from '@/utils/auth'
import { ElButton, ElMessage } from 'element-plus'

const auth = useAuth()

interface Props {
    modelValue: any[];
    data: any;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => [],
    data: () => ({})
})

interface Emits {
    'update:model-value': [any[]]
}

const emit = defineEmits<Readonly<Emits>>()

const onAddShopBusiness = async () => {
    console.log(props.data);
    const data: any = await addDialog.title('添加店铺业务').open({
        row: {
            zxid: props.data.zxid,
            customerId: props.data.customerId,
            customerShopId: props.data.customerShopId,
            ywhzztVal: '正在合作',
            ywhzztName: '正在合作',
            isAdd: true,
            dpptName: props.data.dpptName,
            dpmc: props.data.dpmc
        }
    });
    const val = [...props.modelValue];
    val.push(data);
    emit('update:model-value', val);
}

const onEdit = async (row, index) => {
    // 传店铺1的ID
    const data: any = await addDialog.title('编辑店铺业务').open({ row });
    console.log(data);
    const val = [...props.modelValue]
    val.splice(index, 1, data)
    emit('update:model-value', val)
}

const onCopy = async (row, index) => {
    const data: any = await copyYwlxDialog.title('选择业务类型').open();
    console.log(data);
    const text = `${row.shopName || ''}
店铺平台：${row.platformName || ''}
店铺类目：${row.shopTypeName || ''}
客户名称：${row.customerName || ''}
店铺名称：${row.shopName || ''}
服务日期：${row.startDate || ''}~${row.endDate || ''}
客服类型：${row.customTypeName || ''}
服务班次：${row.serviceShiftName || ''}
收费标准：${row.baseSalary || 0}元+${row.commission || 0}%
咨询数量：${row.consultPeopleNum || 0}人
对接平台：${row.dockingPlatform || ''}
特别备注：${row.customerServiceMessage || ''}`
    await copyToClipboard(text)
    ElMessage({
        message: '复制成功！',
        type: 'success'
    })

}

</script>

<style scoped lang="scss">
.shop-list {
    box-sizing: border-box;
    margin: 0 -14px;
    width: calc(100% + 28px);
    padding: 0 14px;

    &-header {
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    &-title {
        height: 44px;
        display: flex;
        align-items: center;
        background: #FFFFFF;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 13px;
        color: #757575;

        &::before {
            box-sizing: border-box;
            content: '';
            display: inline-block;
            width: 7px;
            height: 10px;
            border: 2.4px solid #3778FB;
            border-radius: 2px;
            margin-right: 5px;
        }
    }
}
</style>